<template>
  <div style="margin-top: 16px; margin-right: 16px">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button v-auth="Permission.ADD" v-show="!!groupId" type="primary" @click="handleCreate">
          新增
        </a-button>
        <a-button v-auth="Permission.DEL" color="error" v-show="rowSelected" @click="handleBatchDelete">
          删除
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
    <ConfigModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup name="DictDetail">
import { nextTick, watch, ref } from 'vue';
import {
  BasicTable,
  useTable,
  TableAction,
  ActionItem,
  EditRecordRow,
} from '/@/components/Table';
import { getConfigPageApi, delConfigApi } from '/@/api/sys/config';
import { Permission, columns } from './config-option';
import { useModal } from '/@/components/Modal';
import ConfigModal from './config-modal.vue';
import { useMessage } from '/@/hooks/web/useMessage';

const props = defineProps({
  groupId: { type: String },
});
const rowSelected = ref(false);
const [registerTable, { reload, getSelectRowKeys }] = useTable({
  title: '系统配置',
  titleHelpMessage: '请选中左侧的配置分组',
  api: getConfigPageApi,
  rowKey: 'configId',
  columns,
  formConfig: {
    labelWidth: 80,
  },
  striped: false,
  useSearchForm: false,
  bordered: true,
  canResize: true,
  ellipsis: true,
  rowSelection: {
    type: 'checkbox',
    onChange: (selectedRowKeys) => {
      rowSelected.value = selectedRowKeys.length > 0;
    }
  },
  actionColumn: {
    width: 150,
    title: '操作',
    dataIndex: 'action',
    fixed: undefined,
  },
  beforeFetch: handleBeforeFetch,
});

const [registerModal, { openModal: openModal }] = useModal();

const { createMessage, createConfirm } = useMessage();

function handleCreate() {
  openModal(true, {
    groupId: props.groupId,
    isUpdate: false,
  });
}

function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    groupId: props.groupId,
    isUpdate: true,
  });
}

function handleDelete(configIds: string[]) {
  delConfigApi(configIds).then((res) => {
    createMessage.success(res.msg);
    handleSuccess();
  });
}

function handleBatchDelete() {
  createConfirm({
    iconType: 'warning',
    title: '确认提示',
    content: '请确认是否删除选中的配置信息？',
    onOk: () => {
      handleDelete(getSelectRowKeys());
    }
  });
}

function handleSuccess() {
  reload();
}

function createActions(record: EditRecordRow): ActionItem[] {
  return [
    {
      icon: 'clarity:note-edit-line',
      label: '编辑',
      auth: Permission.EDIT,
      onClick: handleEdit.bind(null, record),
    },
    {
      icon: 'ant-design:delete-outlined',
      label: '删除',
      auth: Permission.DEL,
      color: 'error',
      popConfirm: {
        title: '是否删除系统配置【' + record.title + '】？',
        confirm: handleDelete.bind(null, [record.configId]),
      },
    },
  ];
}

// 表格请求之前，对参数进行处理
function handleBeforeFetch(params) {
  return { ...params, groupId: props.groupId };
}

watch(
  () => props.groupId,
  () => {
    nextTick(() => {
      reload();
      rowSelected.value = false;
    });
  },
);
</script>
